<template>
	<div class="playlist">
		<div class="playlist-info">
			<Info :playlist="playlist" :loading="playlistsLoading" :play-all="() => playAll()" />
		</div>
		<el-tabs v-model="activeName">
			<el-tab-pane :label="`歌曲列表(${songList.length || 0})`" name="songs" v-loading="songsLoading">
				<MusicList :musicArr="songList" :showArName="true" />
			</el-tab-pane>
			<el-tab-pane label="评论" name="comment">
				<Comment :id="id" :type="1" />
			</el-tab-pane>
			<el-tab-pane label="收藏者" name="collecter"> 收藏者 </el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
//import { getPlaylistDetail, getPlaylistTrackAll } from '@/api/api';
import { storeToRefs } from 'pinia';
import { useSongStore } from '@/store/song';
// import { useUserStore } from '@/store/user';
import { useRoute } from 'vue-router';
import Info from '@/components/Info.vue';
import Comment from '@/components/Comment.vue';
import MusicList from '@/components/common/musicList.vue';

import { getPlayListById, getPlayListSongDetail} from '@/api';
const route = useRoute();

const id = Number(route.params.id)

const activeName = ref('songs');
const playlist = ref([]);
const songList = ref([]);
const playlistId = ref();
playlistId.value = route.query.id;

const { play, addPlayList } = useSongStore();
//const { loopType } = storeToRefs(usePlayerStore());
const playAll = () => {	
	addPlayList(true, ...songList.value);
	play(songList.value[0].id);
};

const playlistsLoading = ref(false);
const songsLoading = ref(true);

const getSongs = async (id: number) => {
	songsLoading.value = true;

	// 获取歌单歌曲
	const songsAll = await getPlayListSongDetail(id);
	songList.value = songsAll;
	// songList.value.forEach((item: any, index: number) => {
	// 	item.index = index + 1;
	// 	item.like = likes.value.indexOf(item.id) !== -1;
	// });
	songsLoading.value = false;
    //console.log('songList是什么',songList);
    //console.log('songList长度是多少',songList.value.length);
};

const getData = async (id: number) => {
	getSongs(id);
	playlistsLoading.value = true;
	playlist.value = await getPlayListById(id);
	
	//playlists.value = playlist;
	//musicLists.value = playlist.tracks;
	playlistsLoading.value = false;
};

onMounted(async () => {
	getData(Number(id));
});

</script>

<style lang="scss" scoped>
.playlist-info {
	min-height: 240px;
}
</style>
